@charset "UTF-8";
#goods {
  height: 100%;
  width: 100%;
  background: url("../media/goods.png") no-repeat center center;
  background-size: 100% 100%;
  padding: 5.5% 0 0 0;
}

@keyframes scrollY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-100%);
  }
}

#goods .container {
  width: 90%;
  height: 95%;
  margin: 4rem auto 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}

#goods .container #forewarning {
  width: 100%;
  position: absolute;
  height: 5.5rem;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

#goods .container #forewarning img {
  width: 6.6rem;
  height: 6.6rem;
}

#goods .container #forewarning .content_msg_box {
  max-width: calc(100% - 6.6rem);
  width: 100%;
  margin-left: 2rem;
  height: 100%;
  background: url("../media/img/warning-con-bg.png");
  background-size: 100% 100%;
  color: #ff5f7e;
  font-size: 6rem;
  overflow: hidden;
  white-space: nowrap;
}

#goods .container #forewarning .content_msg_box:hover .scroll {
  animation-play-state: paused;
}

#goods .container #forewarning .content_msg_box .msg_list_item {
  width: fit-content;
  margin-right: 2rem;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

#goods .container #forewarning .content_msg_box .scroll {
  animation: scroll linear infinite;
  animation-duration: 20s;
  /*鼠标样式*/
  cursor: pointer;
}

#goods .container #forewarning .content_msg_box .time {
  margin: 0 2rem;
}

#goods .container #forewarning .content_msg_box .msg {
  width: fit-content;
}

#goods .container .container_item {
  height: 100%;
}

#goods .container .container_item .content {
  height: calc(100% - 13rem);
  width: 90%;
  margin: auto;
  padding: 1rem 0;
}

#goods .container .container_item .content .list_container {
  height: 100%;
}

#goods .container .container_item .content .list_container .scroll_box {
  height: calc(100% - 8rem);
  overflow: hidden;
  cursor: pointer;
}

#goods .container .container_item .content .list_container .scroll_box:hover .list_content {
  animation-play-state: paused;
}

#goods .container .container_item .content .list_container .list_title {
  background: url("../media/img/list.png");
  background-size: 100% 100%;
}

#goods .container .container_item .content .list_container .list_item {
  background: url("../media/img/op.png");
  background-size: 100% 100%;
  margin: 2rem 0;
}

#goods .container .container_item .content .list_container .list_title,
#goods .container .container_item .content .list_container .list_item {
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 8rem repeat(3, 1fr);
  grid-template-rows: 8rem;
  align-items: center;
  text-align: left;
  font-size: 3.6rem;
}

#goods .container .container_item .content .list_container .list_title .center,
#goods .container .container_item .content .list_container .list_item .center {
  text-align: center;
}

#goods .container .container_item .content .list_container .list_content.scorllY {
  animation: scrollY infinite linear;
  animation-duration: 20s;
}

#goods .container .container_item .content .list_container.left_list .tag {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  border: solid 2px rgba(0, 247, 255, 0.1);
  justify-content: center;
}

#goods .container .container_item .content .list_container.left_list .tag span {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: rgba(59, 216, 255, 0.4);
  border: solid 2px #00f6ff;
  font-size: 3rem;
  line-height: 5rem;
  text-align: center;
}

#goods .container .container_item .content .list_container.center_list .list_title,
#goods .container .container_item .content .list_container.center_list .list_item, #goods .container .container_item .content .list_container.right_list .list_title,
#goods .container .container_item .content .list_container.right_list .list_item {
  grid-template-columns: repeat(3, 1fr);
}

#goods .container #left,
#goods .container #right {
  width: 30%;
}

#goods .container #left .goods_number {
  height: 33.33%;
}

#goods .container #left .goods_number .content {
  position: relative;
  margin: 1rem 0 0 0;
  width: 95%;
  height: calc(100% - 13rem);
  background: url("../media/img/wounded-category.png");
  background-size: 100% 100%;
}

#goods .container #left .goods_number .content .item {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 35%;
}

#goods .container #left .goods_number .content .item .item_title {
  font-size: 3.6rem;
  color: #dfffff;
}

#goods .container #left .goods_number .content .item .num {
  font-size: 6rem;
  color: #ffcb6d;
}

#goods .container #left .goods_number .content .item .num span {
  font-size: 3.6rem;
}

#goods .container #left .goods_number .content .item.top_left {
  top: 3.5rem;
  left: 5rem;
}

#goods .container #left .goods_number .content .item.top_right {
  top: 3.5rem;
  right: 6rem;
}

#goods .container #left .goods_number .content .item.bottom_left {
  bottom: 1.5rem;
  left: 6rem;
}

#goods .container #left .goods_number .content .item.bottom_right {
  bottom: 2rem;
  right: 6rem;
}

#goods .container #left .goods_consumption_ranking {
  height: 66.66%;
}

#goods .container #center {
  width: 40%;
}
